<script setup>
    import { Edit, Delete, Plus } from "@element-plus/icons-vue";
    import { ref } from "vue";
    // 引入 API 接口
    import {
        articleCategoryListService,
        articleListService,
        addArticleService,
        deleteArticleService,
        updateArticleService,
    } from "@/api/article.js";
    // 导入 富文本编辑器
    import { QuillEditor } from "@vueup/vue-quill";
    import "@vueup/vue-quill/dist/vue-quill.snow.css";
    // 导入 tokenStore
    import { useTokenStore } from "@/stores/token.js";
    import { ElMessage } from "element-plus";
    const tokenStore = useTokenStore();
    // 引入 el
    import { ElMessageBox } from "element-plus";

    //文章分类数据模型
    const categorys = ref([]);

    //用户搜索时选中的分类id
    const categoryId = ref("");

    //用户搜索时选中的发布状态
    const state = ref("");

    //文章列表数据模型
    const articles = ref([]);

    //分页条数据模型
    const pageNum = ref(1); // 当前页
    const total = ref(20); // 总条数
    const pageSize = ref(3); // 每页条数
    const onSizeChange = size => {
        pageSize.value = size;
        getAllArticle();
    }; // 当每页条数发生了变化，调用此函数
    const onCurrentChange = num => {
        pageNum.value = num;
        getAllArticle();
    }; // 当前页码发生变化，调用此函数

    // 文章分类回显
    const getAllCategory = async () => {
        const result = await articleCategoryListService();
        categorys.value = result.data;
    };
    getAllCategory(); // 调用文章分类回显函数

    // 刷新文章列表
    const getAllArticle = async () => {
        // 封装传输数据模型
        let params = {
            pageNum: pageNum.value,
            pageSize: pageSize.value,
            categoryId: categoryId.value ? categoryId.value : null,
            state: state.value ? state.value : null,
        };

        // 发送请求
        const result = await articleListService(params);

        // 保存文章列表
        articles.value = result.data.items;
        // 保存文章总条数
        total.value = result.data.total;

        // 扩展列表 categoryName 属性
        articles.value.forEach(item => {
            for (let category of categorys.value) {
                if (item.categoryId == category.id) {
                    item.categoryName = category.categoryName;
                }
            }
        });
    };
    getAllArticle(); // 调用刷新文章列表函数

    // 添加文章
    const visibleDrawer = ref(false); // 控制抽屉是否显示
    const articleModel = ref({
        title: "",
        categoryId: "",
        coverImg: "",
        content: "",
        state: "",
    }); // 添加表单数据模型

    // 文件上传成功后的回调函数
    const uploadSuccess = img => {
        articleModel.value.coverImg = img.data;
    };

    // 标题显示
    const title = ref("");

    // 添加文章函数
    const addArticle = async state => {
        // 保存文章状态
        articleModel.value.state = state;
        // 发送请求
        const result = await addArticleService(articleModel.value);

        // 提示
        ElMessage.success(result.message ? result.message : "添加成功");

        // 刷新页面
        getAllArticle();

        // 隐藏抽屉
        visibleDrawer.value = false;
    };

    // 打开修改文章抽屉
    const showEditDrawer = row => {
        title.value = "修改文章";
        visibleDrawer.value = true;

        // 回显该条文章内容
        articleModel.value = { ...row };
    };

    // 更新文章
    const updateArticle = async state => {
        // 设置文章状态
        articleModel.value.state = state;
        // 发送请求
        const result = await updateArticleService(articleModel.value);
        ElMessage.success(result.message ? result.message : "修改成功");

        // 刷新数据
        getAllArticle();
        // 关闭抽屉
        visibleDrawer.value = false;
    };

    // 删除文章
    const deleteArticle = row => {
        ElMessageBox.confirm("你确定要删除该条文章吗?", "温馨提示", {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning",
        })
            .then(async () => {
                // 发送请求
                const result = await deleteArticleService(row.id);
                ElMessage({
                    type: "success",
                    message: "删除成功",
                });
                // 刷新页面
                getAllArticle();
            })
            .catch(() => {
                ElMessage({
                    type: "info",
                    message: "取消删除",
                });
            });
    };

    // 清除数据
    const clearArticleModel = () => {
        articleModel.value.title = "";
        articleModel.value.categoryId = "";
        articleModel.value.coverImg = "";
        articleModel.value.content = "";
        articleModel.value.state = "";
    };
</script>

<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>文章管理</span>
                <div class="extra">
                    <el-button
                        type="primary"
                        @click="
                            visibleDrawer = true;
                            title = '添加文章';
                            clearArticleModel();
                        "
                        >添加文章</el-button
                    >
                </div>
            </div>
        </template>
        <!-- 搜索表单 -->
        <el-form inline>
            <el-form-item label="文章分类：">
                <el-select placeholder="请选择" v-model="categoryId">
                    <el-option
                        v-for="c in categorys"
                        :key="c.id"
                        :label="c.categoryName"
                        :value="c.id"
                    >
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="发布状态：">
                <el-select placeholder="请选择" v-model="state">
                    <el-option label="已发布" value="已发布"></el-option>
                    <el-option label="草稿" value="草稿"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getAllArticle"
                    >搜索</el-button
                >
                <el-button
                    @click="
                        categoryId = '';
                        state = '';
                    "
                    >重置</el-button
                >
            </el-form-item>
        </el-form>
        <!-- 文章列表 -->
        <el-table :data="articles" style="width: 100%">
            <el-table-column
                label="文章标题"
                width="400"
                prop="title"
            ></el-table-column>
            <el-table-column label="分类" prop="categoryName"></el-table-column>
            <el-table-column label="发表时间" prop="createTime">
            </el-table-column>
            <el-table-column label="状态" prop="state"></el-table-column>
            <el-table-column label="操作" width="100">
                <template #default="{ row }">
                    <el-button
                        :icon="Edit"
                        circle
                        plain
                        type="primary"
                        @click="showEditDrawer(row)"
                    ></el-button>
                    <el-button
                        :icon="Delete"
                        circle
                        plain
                        type="danger"
                        @click="deleteArticle(row)"
                    ></el-button>
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>
        <!-- 分页条 -->
        <el-pagination
            v-model:current-page="pageNum"
            v-model:page-size="pageSize"
            :page-sizes="[3, 5, 10, 15]"
            layout="jumper, total, sizes, prev, pager, next"
            background
            :total="total"
            @size-change="onSizeChange"
            @current-change="onCurrentChange"
            style="margin-top: 20px; justify-content: flex-end"
        />
    </el-card>
    <!-- 抽屉 -->
    <el-drawer
        v-model="visibleDrawer"
        :title="title"
        direction="rtl"
        size="50%"
    >
        <!-- 添加文章表单 -->
        <el-form :model="articleModel" label-width="100px">
            <el-form-item label="文章标题">
                <el-input
                    v-model="articleModel.title"
                    placeholder="请输入标题"
                ></el-input>
            </el-form-item>
            <el-form-item label="文章分类">
                <el-select
                    placeholder="请选择"
                    v-model="articleModel.categoryId"
                >
                    <el-option
                        v-for="c in categorys"
                        :key="c.id"
                        :label="c.categoryName"
                        :value="c.id"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="文章封面">
                <el-upload
                    class="avatar-uploader"
                    :auto-upload="true"
                    :show-file-list="false"
                    action="/api/upload"
                    name="file"
                    :headers="{ Authorization: tokenStore.token }"
                    :on-success="uploadSuccess"
                >
                    <img
                        v-if="articleModel.coverImg"
                        :src="articleModel.coverImg"
                        class="avatar"
                    />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item label="文章内容">
                <div class="editor">
                    <quill-editor
                        theme="snow"
                        v-model:content="articleModel.content"
                        contentType="text"
                    >
                    </quill-editor>
                </div>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    @click="
                        title == '添加文章'
                            ? addArticle('已发布')
                            : updateArticle('已发布')
                    "
                    >发布</el-button
                >
                <el-button
                    type="info"
                    @click="
                        title == '添加文章'
                            ? addArticle('草稿')
                            : updateArticle('草稿')
                    "
                    >草稿</el-button
                >
            </el-form-item>
        </el-form>
    </el-drawer>
</template>

<style lang="scss" scoped>
    .page-container {
        min-height: 100%;
        box-sizing: border-box;

        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }

    /* 抽屉样式 */
    .avatar-uploader {
        :deep() {
            .avatar {
                width: 178px;
                height: 178px;
                display: block;
            }

            .el-upload {
                border: 1px dashed var(--el-border-color);
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
                transition: var(--el-transition-duration-fast);
            }

            .el-upload:hover {
                border-color: var(--el-color-primary);
            }

            .el-icon.avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 178px;
                height: 178px;
                text-align: center;
            }
        }
    }
    .editor {
        width: 100%;
        :deep(.ql-editor) {
            min-height: 200px;
        }
    }
</style>
